﻿@model SearchBoxModel
@using System.Text.Encodings.Web
<form asp-route="ProductSearch" method="get" id="small-search-box-form" class="w-100">
    <input type="hidden" asp-for="Box" value="true" />
    <label for="small-searchterms" class="sr-only">@T("Search.SearchBox.Tooltip")</label>
    <div class="input-group flex-row">
        <input type="search" class="form-control search-box-text" id="small-searchterms" autocomplete="off" name="q" placeholder="@T("Search.SearchBox.Tooltip")">
        @if (Model.AvailableCategories.Any())
        {
            <select asp-for="SearchCategoryId" asp-items="Model.AvailableCategories" class="search-box-select custom-select input-group-addon"></select>
        }
        @await Component.InvokeAsync("Widget", new { widgetZone = "searchbox_before_search_button" })

        <div class="input-group-append">
            <button type="submit" class="btn btn-info search-box-button float-sm-right d-inline-flex">
                <span class="sr-only">@T("Search.SearchBox.Tooltip")</span>
                <span class="mdi mdi-magnify"></span>
            </button>
        </div>
        <ul class="advanced-search-results row">
            <li class="left-side col-md-6 col-12">
                <ul>
                    <li class="categories-container">
                        <a class="title">@T("search.category")</a>
                        <div class="no-data pl-md-3 pl-0">@T("search.noresultstextcategory")</div>
                        <ul></ul>
                    </li>
                    <li class="manufacturers-container">
                        <a href="@Url.RouteUrl("ManufacturerList")" class="title">@T("search.manufacturer")</a>
                        <div class="no-data pl-0">@T("search.noresultstextmanufacturer")</div>
                        <ul></ul>
                    </li>
                </ul>
            </li>
            <li class="right-side col-md-6 col-12">
                <a class="products-title title">Products</a>
                <div class="no-data pl-md-3 pl-0">@T("search.noresultstext")</div>
                <ul class="products-container"></ul>
            </li>
            <li class="center-side col-12">
                <ul>
                    <li class="blog-container mb-3">
                        <a href="@Url.RouteUrl("Blog")" class="title">@T("search.blog")</a>
                        <div class="no-data pl-md-3 pl-0">@T("search.noresultstextblog")</div>
                        <ul></ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script asp-location="Footer">
        $(document).ready(function () {
            @if (Model.AutoCompleteEnabled)
            {
                <text>
                SearchAction.autocomplete(@(Model.SearchTermMinimumLength.ToString()),
                    '@(Url.RouteUrl("ProductSearchAutoComplete"))',
                    '@(Model.ShowProductImagesInSearchAutoComplete)'
                );
                </text>
            }
            @if (Model.SearchTermMinimumLength > 0)
            {
                <text>
                SearchAction.init('@Html.Raw(JavaScriptEncoder.Default.Encode(T("Search.EnterSearchTerms").Text))');
                </text>
            }
        });
    </script>

    @await Component.InvokeAsync("Widget", new { widgetZone = "searchbox" })
</form>
